<template>
    <section class="modlude">
        <el-form :inline="true" :model="formSearch" class="form_inline" label-width="90px">
            <!-- <el-form-item label="所属组织" size="small">
            <el-cascader
                ref="cascader"
                v-model="option1"
                :options="dataTree"
                :props="defaultProps2"
                @change="handleChange"
                clearable
              >
              </el-cascader>
          </el-form-item> -->
            <el-form-item label="所属项目" size="small">
                <el-select v-model="formSearch.projectId" placeholder="请选择项目">
                    <el-option v-for="(item,index) in xqTree" :label="item.name" :value="item.id" :key="index">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="名称" size="small">
                <el-input v-model="formSearch.name" placeholder="请输入巡查点名称"></el-input>
            </el-form-item>

            <el-form-item>
                <!-- v-if="$root.btnControl.find(item=>item=='view')" -->
                <el-button size="small" @click="getlist">查 询
                </el-button>
            </el-form-item>
            <el-form-item>
                <!-- v-if="$root.btnControl.find(item=>item=='add')" -->
                <el-button size="small" @click="addDialog=true"><i class="el-icon-plus"></i> 新 增</el-button>
            </el-form-item>
            <el-form-item>
                <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
                <el-button size="small" type="danger" @click="deleInfor(false)"> 批量删除
                </el-button>
            </el-form-item>

        </el-form>
        <el-table :data="formData" style="width: 100%" stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="projectName" label="项目"></el-table-column>
            <el-table-column prop="name" label="分组名称"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    {{scope.row.status==1?"有效":'无效'}}
                </template>
            </el-table-column>
            <!-- <el-table-column label="是否强制拍照">
          <template slot-scope="scope">
            {{scope.row.isPhoto==1?"是":'否'}}
          </template>
        </el-table-column> -->
            <!-- <el-table-column prop="littlePhoto" label="最少拍照数"></el-table-column> -->
            <el-table-column label="操作" fixed="right" width=400>
                <template slot-scope="scope">
                    <el-button @click="" size="small" @click="effective(scope.row.id,scope.row.status)">
                        {{scope.row.status==1?"无 效":'有 效'}}</el-button>
                    <!-- v-if="$root.btnControl.find(item=>item=='edit')" -->
                    <el-button type="" size="small" @click="xiugai(scope.row,2)">修 改</el-button>
                    <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
                    <el-button type="" size="small" @click="deleInfor(scope.row.id)">删 除</el-button>
                    <!-- v-if="$root.btnControl.find(item=>item=='view')" -->
                    <el-button type="" size="small" @click="xiangqing(scope.row)">详 情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <paging @changePage=handleCurrentPage :get-total='total'></paging>

        <el-dialog :title="Addoredit==1?'新增':'修改'" :visible.sync="addDialog" @close="closedialog"
            :close-on-click-modal="false">
            <div class="cont_box_right">
                <el-form label-position="right" label-width="120px" :model="formPush" :rules="xcdRules" ref='xcdlist'>

                    <el-form-item label="选择项目" size="small" prop="projectId" :rules="{
                  required: true, message: '项目不能为空', trigger: 'blur'
              }">
                        <el-select @change="xqselectchange" v-model="formPush.projectId" placeholder="请选择项目">
                            <el-option v-for="(item,index) in xqTree" :label="item.name" :value="item.id" :key="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="名称" size="small" prop="name" :rules="{
                  required: true, message: '名称不能为空', trigger: 'blur'
              }">
                        <el-input v-model="formPush.name" placeholder="请输入分组名称"></el-input>
                    </el-form-item>
                    <el-form-item label="设备" :rules="{
                required: true, message: '名称不能为空', trigger: 'blur'
            }">
                        <el-select v-model="value1" multiple placeholder="请选择">
                            <el-option v-for="item in shebeidata" :key="item.id" :label="item.name" :value="item.id">
                                <span style="float: left">{{ item.name }}</span>
                                <span style="float: right;margin-right: 15px; color: #8492a6; font-size: 13px">设备ID:{{
                                    item.id }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备检查项" :rules="{
                required: true, message: '名称不能为空', trigger: 'blur'
            }">
                        <el-select v-model="value2" multiple placeholder="请选择">
                            <el-option v-for="item in jcxdata" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="状态" prop="status" :rules="{
                        required: true, message: '状态不能为空', trigger: 'blur'
                    }">
                        <el-radio v-model="formPush.status" :label="2">无效</el-radio>
                        <el-radio v-model="formPush.status" :label="1">有效</el-radio>
                    </el-form-item>
                    <el-form-item label="是否需要拍照" prop="take" :rules="{
                        required: true, message: '此项不能为空', trigger: 'blur'
                    }">
                        <el-radio v-model="formPush.take" :label="2">否</el-radio>
                        <el-radio v-model="formPush.take" :label="1">是</el-radio>
                    </el-form-item>
                    <el-form-item label="图片标准：" prop="picture">
                        <el-upload ref="addUpdata" class="avatar-uploader" action="/api/v1.0/file/upload/file"
                            :auto-upload="false" :show-file-list="false" :on-change="onChange" list-type="picture"
                            :on-success="handleAvatarSuccess">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="请输入描述" size="small" prop="describe">
                        <el-input v-model="formPush.describe"></el-input>
                    </el-form-item>

                    <!-- <div class="zhuyi">
                        <p>注意：选择位置时可以只选择区域，也可以选择区域-房号。</p>
                    </div> -->
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium " @click="closedialog">取 消</el-button>
                <el-button size="medium " @click="addList">提 交</el-button>
            </div>
        </el-dialog>

        <el-dialog title="详情" :visible.sync="xiangqingDialog" width="62%" :close-on-click-modal="false">

            <el-form :inline="true" :model="xiangqingform" class="form_inline" label-width="70px">
                <el-form-item label="项目" size="small">
                    <el-input v-model="xiangqingform.projectName"></el-input>
                </el-form-item>
                <el-form-item label="名称" size="small">
                    <el-input v-model="xiangqingform.name"></el-input>
                </el-form-item>
                <el-form-item label="状态" size="small">
                    <el-input v-model="xiangqingform.status==1?'有效':'无效'"></el-input>
                </el-form-item>
                <el-form-item label="是否拍照" size="small">
                    <el-input v-model="xiangqingform.take==1?'是':'否'"></el-input>
                </el-form-item>
                <el-form-item label="备注" size="small">
                    <el-input v-model="xiangqingform.describe"></el-input>
                </el-form-item>
            </el-form>
            <el-table :data="sbData" style="width: 100%" max-height="450">
                <el-table-column prop="projectName" label="项目"></el-table-column>
                <el-table-column prop="id" label="设备ID"></el-table-column>
                <el-table-column prop="subsystemCode" label="所属子系统"></el-table-column>
                <el-table-column prop="name" label="设备名称"></el-table-column>
                <el-table-column prop="installationSite" label="安装位置"></el-table-column>
                <el-table-column label="操作" fixed="right" width="220px">
                    <template slot-scope="scope">
                        <!-- <el-button type="" size="small" @click="">设备二维码</el-button> -->
                        <el-button type="" size="small" @click="jcxxq(scope.row.name)">检查项详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>

        <el-dialog title="检查项详情" :visible.sync="jcxxqDialog" width="25%" :close-on-click-modal="false">

            <div style="font-size: 16px;">
                <div style="margin-bottom: 10px;">设备名称：{{shebeiname}}</div>
                <div v-for="(item,index) in jcxxqdata" :key="index">
                    <div style="margin-top: 10px;">检查项{{index+1}}： {{item.name}}</div>
                    <div style="margin-top: 10px;">检查项{{index+1}}内容：</div>
                    <div v-for="(item,inde) in item.content1" :key="inde">
                        <span style="margin-left:50px;">{{item.namenr}}</span>
                    </div>
                </div>
            </div>


        </el-dialog>


    </section>
</template>

<script>
    import paging from "../paging"
    //   import paging1 from "../paging"
    import { devicepjToList, updDeviceGrouping, deleteDeviceGrouping, getDeviceGroupingList, getDevOperationsList, pjIdBayDeviceExamineList, addDeviceGrouping, sectionList, houseList, xqSelectList, orgTree } from '../../url/api';
    export default {
        data() {
            return {
                Addoredit: 1,
                uploadURL: '/api/v1.0/file/upload/file',
                previewPath: '',
                previewVisible: false,
                hideUpload: false,
                xiangqingDialog: false,
                jcxxqDialog: false,
                headImg: '',//图片
                limitCount: 1,
                // headers: {
                //     Authorization: sessionStorage.getItem('Authorization'),
                //     token: sessionStorage.getItem('token')
                // },
                selecthouse: false,//房间选择窗口


                checkStrictly: false,
                bindRole: {},
                shebeidata: [],
                jcxdata: [],
                option1: [],
                value1: [],
                value2: [],
                xqTree: [],
                isAddorUpdate: 1,//1添加、2修改
                formSearch: {
                    current: 1,
                    size: 10,
                },
                formSearch1: {
                    type: 1,
                },
                locationdform: {},
                xunchaxiangData: [],
                formData: [],//数据
                sbData: [],
                jcxxqdata: [],
                //jxxnrdata:[],
                sectionData: [],
                houseData: [],//房间数据
                // xcxData:[],//巡查项data
                formhouseData: {
                    current: 1,
                    size: 5
                },
                formsectionData: {
                    current: 1,
                    pid: 0,
                    size: 5
                },
                formxunchaxiang: {
                    current: 1,
                    size: 5,
                    type: 1,
                },
                shebeiname: '',
                //examineId:[],//巡查项id
                deleBatch: [],//删除数据
                formUpdate: {},//修改表单
                total1: 0,//数据总数
                total2: 0,//数据总数
                total: 0,//数据总数
                total3: 0,//数据总数
                pages: 0,//页面总数
                pages1: 0,//页面总数
                pages2: 0,//页面总数
                pages3: 0,//页面总数

                addDialog: false,
                updateDialog: false,
                dialog: false,
                fangjianname: {

                },
                xiangqingform: {},
                formPush: {
                    name: '',
                    describe: '',
                    status: 1,
                    take: 1
                },
                dataTree: [],
                defaultProps: {//树状图key定义
                    children: 'data',
                    label: 'name'
                },
                defaultProps2: {
                    children: 'children',
                    label: 'name',
                    value: 'id',
                    expandTrigger: 'hover', checkStrictly: true
                },
                // 表单校验规则
                xcdRules: {
                    headImg: [{ required: true, message: '请上传图片', trigger: 'change' }],
                },
                typeIds: [],
                terearIds: [],

                dynamicTags: [],
                imageUrl: '',
                xunchaxiang: false,
                imgfileList: []
            }
        },
        methods: {
            gotoadd() {
                let params = {}
                //console.log(this.value2);
                params.operationsId = this.value1.join('_')
                params.examineId = this.value2.join('_')
                params.picture = this.formPush.picture
                params.status = this.formPush.status
                params.take = this.formPush.take
                params.name = this.formPush.name
                params.projectId = this.formPush.projectId
                params.describe = this.formPush.describe
                if (this.Addoredit == 1) {
                    addDeviceGrouping(params).then((res) => {
                        ////console.log("新增", res)
                        if (res.data.ok) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.getlist()

                        } else {
                            this.$message('添加失败')
                        }
                        this.addDialog = false
                        ////console.log("hahaha");
                    })
                } else if (this.Addoredit == 2) {
                    params.id = this.formPush.id
                    ////console.log("hahaha");
                    updDeviceGrouping(params).then((res) => {
                        ////console.log("新增", res)
                        if (res.data.ok) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.getlist()

                        } else {
                            this.$message('修改失败')
                        }
                        this.addDialog = false
                    })
                }
            },
            // 图片上传
            onChange(file, fileList) {
                //console.log(file, fileList)
                // this.imageUrl = URL.createObjectURL(file.raw);
                console.log(file, fileList, "aaaaaaaaaaa");
                this.imgfileList = fileList;
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            //picture
            handleAvatarSuccess(resp, file, fileList) {
                // debugger
                if (resp.ok) {
                    this.imgfileList = fileList
                    // console.log(resp.data[0], "QQQQQQQQQQ");
                    this.formPush.picture = resp.data[0];
                    this.imageUrl = resp.data[0];
                    this.gotoadd()
                }
            },
            xiugai(row, index) {
                //console.log(row);
                this.value1 = []
                this.value2 = []

                let params = {
                    projectId: row.projectId
                }
                pjIdBayDeviceExamineList(params).then((res) => {//查询检查项列表

                    ////console.log("检查项列表", res)
                    if (res.data.ok) {
                        this.jcxdata = res.data.data
                        //console.log(this.jcxdata, this.shebeidata);
                        let vv = row.examineId.split('_')
                        vv.forEach(val => {
                            this.value2.push(val)
                        })

                        //console.log(this.value2);
                    } else {
                        this.$message(res.data.msg);
                    }
                })
                devicepjToList(params).then((res) => {//查询设备列表

                    ////console.log("设备列表", res)
                    if (res.data.ok) {
                        this.shebeidata = res.data.data
                        let vv = row.operationsId.split('_')
                        vv.forEach(val => {
                            this.value1.push(val)
                        })
                        console.log(this.value1, "AAAAAAAAAAA");
                    } else {
                        this.$message(res.data.msg);
                    }

                })
                this.Addoredit = index
                this.formPush.projectId = row.projectId * 1
                this.formPush.name = row.name
                this.formPush.status = row.status
                this.formPush.take = row.take
                this.formPush.picture = row.picture
                this.imageUrl = row.picture
                this.formPush.describe = row.describe
                this.formPush.id = row.id
                this.addDialog = true
                //console.log(this.formPush);



            },

            effective(id, status) {
                let params = {
                    id: id
                }
                if (status == 1) {
                    params.status = 2
                } else {
                    params.status = 1
                }
                //this.$message("还没有无效或有效接口！");

                this.$confirm("确定要执行此操作吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updDeviceGrouping(params).then((res) => {
                        ////console.log("删除", res)
                        if (res.data.ok) {
                            this.$message({
                                message: '操作成功！',
                                type: 'success'
                            });
                            this.getlist()
                        } else {
                            this.$message('操作失败！')
                        }
                    })

                }).catch(_ => { });

            },

            deleInfor(ids) {
                let arrId = []
                if (ids) {
                    arrId.push(ids)
                } else {
                    if (this.deleBatch.length != 0) {
                        this.deleBatch.filter((item) => {
                            arrId.push(item.id)
                            return item
                        })
                    } else {
                        this.$message("请勾选要删除的数据！")
                        return
                    }
                }

                this.$confirm("确定要删除吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDeviceGrouping(arrId).then((res) => {
                        ////console.log("删除", res)
                        if (res.data.ok) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getlist()
                        } else {
                            this.$message('删除失败')
                        }
                    })

                }).catch(_ => { });

            },
            jcxxq(name) {
                this.jcxxqDialog = true
                this.shebeiname = name
            },


            xiangqing(data) {
                let xqdata = data;
                this.xiangqingform = {
                    describe: xqdata.describe,
                    name: xqdata.name,
                    status: xqdata.status,
                    take: xqdata.take,
                    projectName: xqdata.projectName,
                };
                
                this.sbData = data.deviceOperaVOS;
                ////console.log(data);
                console.log("this.sbData",this.sbData);
                data.deviceExamineVOS.forEach((item) => {
                    ////console.log(item.content);
                    if (item.content) {
                        let arry = []
                        let arry1 = []
                        let neirong = {
                            namenr: ''
                        }
                        arry = item.content.split('_')

                        arry.forEach((val) => {
                            let neirong = {
                                namenr: ''
                            }
                            neirong.namenr = val
                            ////console.log(val);
                            arry1.push(neirong)
                        })
                        item.content1 = arry1

                    }
                })

                this.jcxxqdata = data.deviceExamineVOS;

                this.xiangqingDialog = true
            },


            closedialog() {
                this.formPush = {
                    name: '',
                    describe: '',
                    status: 1,
                    take: 1
                }
                this.value1 = []
                this.value2 = []
                this.imageUrl = ''
                this.Addoredit = 1
                this.addDialog = false
                //console.log("清空");
            },

            addList() {
                if (this.value1.length == 0) {
                    this.$confirm("设备不能为空！")
                }
                if (this.value2.length == 0) {
                    this.$confirm("设备检查项不能为空！")
                }
                
                ////console.log("params   ", params)
                this.$refs.xcdlist.validate((valid) => {
                    ////console.log("valid", valid)
                    if (valid) {
                        this.$confirm("确定要执行该操作吗？", '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            console.log(this.imgfileList.length, this.imageUrl, this.formPush.picture);
                            // debugger
                            if (this.imgfileList.length == 0 && this.imageUrl == this.formPush.picture) {
                                this.gotoadd();
                            } else {
                                this.$refs.addUpdata.submit();
                            }
                            console.log(this.formPush)

                            // this.addDialog = false

                        }).catch(_ => { })

                    } else {
                        ////console.log('error submit!!');
                        return false;
                    }
                });

            },
            xqselectchange(data) {
                let params = {
                    projectId: data
                }
                pjIdBayDeviceExamineList(params).then((res) => {//查询检查项列表
                    ////console.log("检查项列表", res)
                    if (res.data.ok) {
                        this.jcxdata = res.data.data
                    } else {
                        this.$message(res.data.msg);
                    }
                })
                devicepjToList(params).then((res) => {//查询设备列表
                    ////console.log("设备列表", res)
                    if (res.data.ok) {
                        this.shebeidata = res.data.data
                    } else {
                        this.$message(res.data.msg);
                    }
                })

            },
            getsectionList() {
                if (this.formPush.projectId) {
                    this.formsectionData.projectId = this.formPush.projectId;
                    this.selecthouse = true;
                } else {
                    this.$message("请先选择项目！")
                    return
                }
                sectionList(this.formsectionData).then((res) => {//区域列表
                    ////console.log(res)
                    if (res.data.ok) {
                        this.sectionData = res.data.data.records.filter((item) => {
                            if (item.gmtModified) {
                                item.gmtModified = this.$root.getDateArray(item.gmtModified)[9]
                            }
                            return item
                        })
                        this.total1 = res.data.data.total * 1
                        this.pages1 = res.data.pages
                    } else {
                        this.$message(res.data.msg);
                    }
                })
            },
            getxcxList() {//巡查项选择
                if (this.formPush.projectId) {
                    this.formxunchaxiang.projectId = this.formPush.projectId;
                    if (this.dynamicTags != null && this.dynamicTags.length > 0) {//判断带入的标签是否为空
                        //this.dynamicTags.push({id:this.formPush.examineId,num:'',real_name:this.bkr,user_name:'',orgname:''});//初始化
                        this.$refs.multipleTable2.toggleRowSelection(this.dynamicTags[0], true);//选中表格中与标签对应的行数据
                    }
                    this.xunchaxiang = true;
                } else {
                    this.$message("请先选择项目！")
                    return
                }

                //     
            },
            //表格翻页多选
            getRowKeys: function (row) {
                return row.id;
            },
            toggleSelection4(val) {

                ////console.log("xuanzhonsg", val);
                this.dynamicTags = [];
                for (var i = 0; i < val.length; i++) {
                    this.dynamicTags.push(val[i]);//直接push表格数据对象，这样就可以方便将两个数据进行关联，如方法：handeleClose

                }
            },
            rowClick(row, column) {
                if (row.name) {
                    this.formhouseData.sectionName = row.name;
                    this.formhouseData.projectId = this.formPush.projectId;
                    this.gethouselist();
                }
                ////console.log("row:", row)
                //this.selectfj = true;
            },
            rowhouseClick(row, column) {
                ////console.log("rowhouse:", row)
            },

            closeqyfj() {
                this.formhouseData = {
                    current: 1,
                    size: 5
                }
            },
            gethouselist() {
                // ////console.log("zzzzzzzzzzzzzzzz");
                if (this.formhouseData.sectionName) {
                    this.formhouseData.projectId = this.formPush.projectId;

                    houseList(this.formhouseData).then((res) => {//更具区域名称查房间列表
                        ////console.log(res)
                        if (res.data.ok) {
                            this.houseData = res.data.data.records.filter((item) => {
                                if (item.gmtModified) {
                                    item.gmtModified = this.$root.getDateArray(item.gmtModified)[9]
                                }
                                return item
                            })
                            this.total2 = res.data.data.total * 1
                            this.pages2 = res.data.pages
                        } else {
                            this.$message(res.data.msg);
                        }
                    })
                }
            },

            getlist() {
                ////console.log("this.formSearch", this.formSearch);
                getDeviceGroupingList(this.formSearch).then((res) => {//查询分组列表
                    //console.log("分组列表:", res)
                    if (res.data.ok) {
                        this.formData = res.data.data.records.filter((item) => {
                            return item
                        })
                        this.total = res.data.data.total * 1
                    } else {
                        this.$message(res.data.msg);
                    }
                })
            },
            getInit() {
                // this.getshiwuTypejieshu()
                this.getlist()
                // this.getworkOrderlist()
                xqSelectList({}).then((res) => {//项目选择列表
                    ////console.log(res)
                    if (res.data.ok) {
                        this.xqTree = res.data.data
                    }
                })
                // let org_tree={
                //   name:'',
                //   status:1
                // }
                // orgTree(org_tree).then((res)=>{//获取组织列表
                //   //console.log(res)
                //   if(res.data.ok){
                //     this.dataTree = res.data.data
                //   }
                // })
            },
            handleSelectionChange(val, self) {//多选
                this.deleBatch = val
                //console.log(this.deleBatch)
            },
            handleCurrentPage(val) {//页码改变
                this.formSearch.current = val
                this.getlist()
            },
            handleCurrentPage1(val) {//页码区域改变
                this.formsectionData.current = val
                this.getsectionList()
            },
            handleCurrentPage2(val) {//页码区域改变
                this.formhouseData.current = val
                this.gethouselist()
            },
            handleCurrentPage3(val) {//页码区域改变
                this.formxunchaxiang.current = val
                this.getxcxList()
            },

            //----------tag 标签----
            handleClose(tag) {
                for (var i = 0; i < this.dynamicTags.length; i++) {
                    if (tag.id === this.dynamicTags[i].id) {//以id作为key进行比对
                        this.dynamicTags.splice(i, 1);//删除对应id的tag
                        this.$refs.multipleTable2.toggleRowSelection(tag, false);//同时取消表格中对应行的勾选状态
                    }
                }
                // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },



        },
        mounted() {
            this.getInit()
        },
        components: {
            paging,
            //   paging1
        }
    }
</script>
<style>
    .hide .el-upload--picture-card {
        display: none;
    }

    .el-form-item {
        margin-bottom: 20px;
    }
</style>